<template>
	<view class="mobile_login">
		<view class="title">
			<text>hi 欢迎来到蜗壳工作直通车</text>
			<text class="bottom">首次登录将自动注册</text>
		</view>

		<view class="form">
			<u-form :model="form" ref="uForm">
				<u-form-item prop="mobile" :left-icon-style="{width:'40rpx',height:'40rpx', position:'relative', top:'10rpx'}"
				 left-icon="/static/uview/my/login_mobile.png">
					<u-input v-model="form.mobile" placeholder="请输入手机号" />
				</u-form-item>
				<u-form-item prop="verifyCode" :left-icon-style="{width:'40rpx',height:'40rpx', position:'relative', top:'10rpx'}"
				 left-icon="/static/uview/my/login_code.png">
					<u-input v-model="form.verifyCode" placeholder="请输入验证码" />
					<u-button size="mini" slot="right" :plain="true" type="default" :custom-style="{border:'none', color:'#54B4F5'}"
					 @click="getCode">{{codeText}}</u-button>
					<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
				</u-form-item>
			</u-form>
			<u-button type="primary" @click="submit" :custom-style="{margin:'100rpx 0 0 0', background: 'linear-gradient(270deg, #1698F9 0%, #4CC5FC 100%)'}">
				<text :style="{margin:'0 0 0 10rpx'}">登录</text>
			</u-button>
		</view>

		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				codeText: '发送验证码',
				form: {
					mobile: '',
					verifyCode: '',

				},
				rules: {
					mobile: this.$u.cusTest.mobile,
					verifyCode: this.$u.cusTest.verifyCode,
				},

			}
		},
		onLoad() {
			const _self = this;

			uni.login({
				provider: 'weixin',
				success: function(loginRes) {

					if (loginRes && loginRes.errMsg == "login:ok") {
						const params = {
							"grant_type": "wx_app_code",
							"code": loginRes.code,
							"scope": "global_access:end_user,tenant:" + _self.vuex_appId
						}
						_self.$u.api.getTokenByCode(params).then(res => {
							_self.$u.vuex('vuex_user', res.user);
							_self.$u.vuex('vuex_tenant', res.tenant);
							_self.$u.vuex('vuex_token', res.token_type + " " + res.access_token);
						})
					}
				},
				fail: function(error) {
					console.log(error)
				}
			});
		},

		onShow() {

		},

		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},

		methods: {
			codeChange(text) {
				this.codeText = text;
			},
			getCode() {
				const {
					mobile = ''
				} = this.form;

				if (!(mobile && /^1[0-9]{10}$/.test(mobile))) {
					this.$refs.uToast.show({
						title: '请填写正确的手机号',
						type: 'error',
						duration: 2000,
					})

				} else {
					if (this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						setTimeout(() => {
							uni.hideLoading();
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();

							const params = {
								"mobile": mobile,
								"type": "bindmobile",
								"scope": "global_access:end_user,tenant:" + this.vuex_appId
							}
							this.$u.api.getSmsCode(params)
						}, 1000);
					} else {
						this.$u.toast('倒计时结束后再发送');
					}
				}
			},
			submit() {
				const {
					mobile = '',
						verifyCode = '',
				} = this.form

				const _self = this

				_self.$refs.uForm.validate(valid => {
					if (valid) {

						const params = {
							"mobile": mobile,
							"sms_code": verifyCode,
							"wx_open_id": this.vuex_user.wx_open_id, //可选，如果传了，绑定到对应的微信号
							"tenant_id": this.vuex_tenant.id,
							"source": "wx_app",
							"app_id": this.vuex_appId
						};

						_self.$u.api.getBindMobile(params).then(res => {
							this.$u.vuex('vuex_user', res.user);
							this.$u.vuex('vuex_tenant', res.tenant);
							this.$u.vuex('vuex_token', res.token_type + " " + res.access_token);
							_self.$u.route({
								type: 'switchTab',
								url: 'pages/main/my/my',
							})
						})
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mobile_login {
		padding: 0 60rpx;

		.title {
			padding: 64rpx 0 48rpx 0;

			text {
				font-size: 48rpx;
				line-height: 66rpx;
				color: #333333;
				display: block;
			}

			.bottom {
				font-size: 30rpx;
				line-height: 44rpx;
				color: #999999;
			}
		}

		.form {}
	}
</style>
